<template>
  <div>
    <!-- 表格 -->
    <el-table :data="userData.records" style="width: 100%">
      <el-table-column label="统一认证id" prop="authId" />
      <el-table-column label="身份证号" prop="idCardNo" />
      <el-table-column label="身份证号是否验证">
        <template slot-scope="scope">
          <p v-if="scope.row.idCardNoVerify == true">审核通过</p>
          <p v-if="scope.row.idCardNoVerify == false">审核未通过</p>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="操作" fixed="right" width="320">
        <template #default="scope">
          <router-link :to="'/order/orderAdd/' + scope.row.id">
            <el-button size="mini" type="primary">下订单</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="Number(userData.current)"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="Number(userData.size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(userData.total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>
<script>
import user from '@/api/user/user'
import distpicker from 'v-distpicker'

export default {
  name: 'Index',
  components: {
    distpicker
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      addressByUserIdData: {},
      /**
       * 查询对象
       */
      queryData: {
        phone: '',
        idCardNoVerify: ''
      },
      /**
       * 页数
       */
      pageSize: 0,
      /**
       * 页码
       */
      current: 0,
      /**
       * 获取到的数据
       */
      userData: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      /**
       * 地址查询对象
       */
      addressData: {
        name: '',
        userId: ''
      },
      /**
       * 地址簿查询页面数量大小
       */
      addressPageSize: 1000,
      /**
       * 地址簿查询当前页码
       */
      addressPageNum: 0,
      // province:'',
      // city:'',
      /**
       * 根据id获取的数据
       */
      addressByIdData: {},
      /**
       * 添加数据
       */
      addressByIdData2: {},
      /**
       * 用户id
       */
      userId: ''
    }
  },
  created() {
    this.queryData.idCardNoVerify = true
    this.queryUser(this.queryData, this.pageSize, this.current)
  },
  methods: {
    addAddress() {
      user
        .addAddress(this.addressByIdData2)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.addressByIdData2 = {}
          this.dialogVisible2 = false
          this.dialogFormVisible = false
        })

    },
    openAdd() {
      this.dialogVisible2 = true
      this.addressByIdData2.userId = this.userId
      this.addressByIdData2.isDefault = false
    },
    /**
     * 修改地址信息
     */
    onSubmit() {
      user
        .updateAddressDataById(this.addressByIdData)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.dialogFormVisible = false
          this.dialogVisible = false
          this.addressByIdData = {}
        })

    },
    getAddressDataById(index, row) {
      this.dialogVisible = true
      user
        .getAddressDataById(row.id)
        .then((data) => {
          this.addressByIdData = data.data
        })

    },
    /**
     * 地址删除
     */
    handleDeleteAddress(index, row) {
      this.deleteAddressOpen(
        '删除这条地址信息后,不可在恢复,确定要删除吗?',
        row.id
      )
    },
    /**
     * 地址删除提示
     */
    deleteAddressOpen(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .deleteAddressById(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.dialogFormVisible = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 修改地址簿为默认地址
     */
    changeTheDefaultAddress(index, row) {
      const r = {
        id: row.id,
        userId: row.userId,
        name: row.name,
        phoneNumber: row.phoneNumber,
        extensionNumber: row.extensionNumber,
        provinceId: row.provinceId,
        cityId: row.cityId,
        countyId: row.countyId,
        address: row.address,
        companyName: row.companyName,
        isDefault: row.isDefault,
        createTime: row.createTime
      }
      user
        .changeTheDefaultAddress(r)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.dialogFormVisible = false
        })
    },
    selected(data) {
      this.addressByIdData.province = data.province.value
      this.addressByIdData.city = data.city.value
      this.addressByIdData.county = data.area.value
    },
    selected2(data) {
      this.addressByIdData2.province = data.province.value
      this.addressByIdData2.city = data.city.value
      this.addressByIdData2.county = data.area.value
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.deleteOpen('你确定要删除该条数据,删除之后,不可在恢复!!', row.id)
    },
    queryUser(data, pageSize, pageNum) {
      user
        .queryByPhone(data, pageSize, pageNum)
        .then((data) => {
          this.userData = data.data
          this.pageSize = this.userData.size
          this.current = this.userData.current
        })
    },
    handleSizeChange(val) {
      // this.pageSize = val;
      this.queryUser(this.queryData, val, this.current)
    },
    handleCurrentChange(val) {
      // this.current = val;
      this.queryUser(this.queryData, this.pageSize, val)
    },
    /**
     * 审核
     */
    checkMember(index, row) {
      this.open('您确定要审核吗?', row.id)
    },
    /**
     * 审核操作提示
     */
    open(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .checkMember(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.queryUser(this.queryData, this.pageSize, this.current)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 删除提示
     */
    deleteOpen(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .deleteUserById(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.queryUser(this.queryData, this.pageSize, this.current)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    showAddressBookInfoByUserId(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.addressData.userId = row.id
      this.userId = row.id
      user
        .queryAddressBookBasedOnUserId(
          this.addressData,
          this.addressPageSize,
          this.addressPageNum
        )
        .then((data) => {
          this.addressByUserIdData = data.data
        })
    }
  }
}
</script>

<style>
</style>
